<template>
  <div id="maintable">
    <el-row>
      <el-col class="topbar">
        <div class="searchbox">
          <el-input v-model="search" placeholder="输入内容关键字搜索" />
        </div>
        <div class="addbox">
          <el-button type="primary" @click="handleAdd()">添加</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table :data="showData" border style="width: 100%">
      <el-table-column type="index" label="#" width="50" align="center" :resizable="false"></el-table-column>
      <el-table-column prop="date" label="日期" width="220" align="center" :resizable="false"></el-table-column>
      <el-table-column prop="content" label="内容" align="center" :resizable="false"></el-table-column>
      <el-table-column prop="income" label="收入" width="180" align="center" :resizable="false">
        <template slot-scope="scope">
          <span style="color:#15d170">{{ scope.row.income }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="expend" label="支出" width="180" align="center" :resizable="false">
        <template slot-scope="scope">
          <span style="color:#ff0000">{{ scope.row.expend }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="180" align="center" :resizable="false"></el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="pagination.pageSizes"
        :page-size="pagination.pageSize"
        :layout="pagination.layout"
        :total="pagination.total"
      ></el-pagination>
    </div>

    <TableDialog :dialog="dialog" :dialogFormData="dialogFormData" @updateData="getTableData()"></TableDialog>
  </div>
</template>

<script>
import TableDialog from "@/components/TableDialog";
export default {
  data() {
    return {
      tableData: [], // 数据库获取的完整数据
      showData: [], // 最终展示的数据
      // dialog初始数据
      dialogFormData: {
        content: "",
        income: "",
        expend: "",
        remark: "",
      },
      search: "", // 搜索框数据绑定
      // dialog属性
      dialog: {
        show: false,
        title: "",
      },
      // 分页初始属性
      pagination: {
        currentPage: 1,
        total: 10,
        pageSize: 8,
        pageSizes: [1, 5, 8],
        layout: "total, sizes, prev, pager, next, jumper",
      },
    };
  },
  created() {
    this.pagination.currentPage = 1;
    this.pagination.pageSize = 8;
    this.getTableData();
  },
  computed: {
    // 搜索框过滤后的数据
    searchFilterData() {
      return this.tableData.filter(
        (data) =>
          !this.search ||
          data.content.toLowerCase().includes(this.search.toLowerCase())
      );
    },
  },
  watch: {
    // 过滤后的数据有变化，就需要重新设置分页属性
    searchFilterData(newValue, oldValue) {
      this.pagination.total = newValue.length;
      this.pagination.currentPage = 1;
      this.showData = newValue.filter((item, index) => {
        return index < this.pagination.pageSize;
      });
    },
  },
  methods: {
    // 获取表格数据
    getTableData() {
      this.$http.get("/data").then((res) => {
        this.tableData = res.data;
        this.setPagination();
      });
    },
    // 添加
    handleAdd() {
      this.dialog = {
        show: true,
        title: "添加",
        option: "add",
      };
      this.dialogFormData = {
        content: "",
        income: "",
        expend: "",
        remark: "",
      };
    },
    // 编辑
    handleEdit(index, row) {
      this.dialog = {
        show: true,
        title: "编辑",
        option: "edit",
        id: row._id,
      };
      this.dialogFormData = {
        content: row.content,
        income: row.income,
        expend: row.expend,
        remark: row.remark,
      };
    },
    // 删除
    handleDelete(index, row) {
      this.$http.delete(`/data/delete/${row._id}`).then((res) => {
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getTableData();
      });
    },
    // 初始化分页
    setPagination() {
      this.pagination.total = this.searchFilterData.length;
      this.showData = this.searchFilterData.filter((item, index) => {
        return index < this.pagination.pageSize;
      });
    },
    // 显示条数切换
    handleSizeChange(pageSize) {
      // pageSize 每页多少条
      this.pagination.currentPage = 1;
      this.pagination.pageSize = pageSize;

      this.showData = this.searchFilterData.filter((item, index) => {
        return index < pageSize;
      });
    },
    // 页数切换
    handleCurrentChange(currentPage) {
      // currentPage 当前页
      // index 页面第一条数据的下标
      let index = this.pagination.pageSize * (currentPage - 1);
      // nums 到当前页面为止共可以显示多少条
      let nums = this.pagination.pageSize * currentPage;
      let tables = [];
      for (let i = index; i < nums; i++) {
        if (this.searchFilterData[i]) {
          tables.push(this.searchFilterData[i]);
        }
        this.showData = tables;
      }
    },
  },
  components: {
    TableDialog,
  },
};
</script>

<style lang="less" scoped>
#maintable {
  width: 100%;
  height: 100%;
  background-color: rgba(92, 92, 92, 0.055);
  box-sizing: border-box;
  padding: 20px;
  .topbar {
    margin-bottom: 15px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .searchbox {
      min-width: 270px;
      margin-right: 10px;
      .el-button {
        width: 100%;
      }
    }
  }
  .el-table {
    border-radius: 5px;
  }
  .pagination {
    margin-top: 10px;
    float: right;
  }
}
</style>